/*
* @Author: lenovo
* @Date:   2017-11-16 18:40:51
* @Last Modified by:   lenovo
* @Last Modified time: 2017-12-01 18:13:50
*/
require('./index.css');
var page = {
			// 获取包裹所有video和其他按钮的容器
	getVideoWrap : document.getElementsByClassName("video-wrap")[0],
			// 获取包裹所有video的祖先容器
	getVideoDiv : document.getElementsByClassName("video-div")[0], 
			// 获取所有video 
	getVideoTag : document.getElementsByTagName('video'),
			// 获取添加自己内容的按钮 
	getBtnAdd : document.querySelector('#addMy'),
			// 获取上传完毕的按钮 
	getBtnAddCom : document.querySelector('#addCom'),
			// 获取编辑的按钮
	getAlterVideoBtn:document.querySelector('#alter'),
			// 获取编辑完成按钮
	getSubmitBtn:document.querySelector("#complish"),
			// 返回首页按钮
	toIndex:document.querySelector('#toIndex'),
			// 返回视频列表按钮
	// toVideoColl:document.querySelector('#toVideoColl'),
	getIfDelShowDiv:document.getElementsByClassName('if-del-show'),
			// 获取所有video的包裹item
	getVideoItem:document.getElementsByClassName('video-item'),
	getAllWillHideBtn:document.getElementsByClassName('willHide'),
	getSpanText:document.getElementsByClassName("cd-selected-text"),
	flag:1,
	cwidth:document.body.clientWidth,
	videoBasicWidth:0,
	init: function (){
		var _this = this;
		// this.currVideo[0]=[];
		HTMLCollection.prototype.toArray=function(){
                return [].slice.call(this);
        };
        // alert(this.cwidth);
        if(this.cwidth>=320){//浏览器最小宽度是320，再小就不显示视频
	        this.videoBasicWidth = this.getVideoWrap.offsetWidth/3;   //
	        // alert(this.videoBasicWidth);
	        this.getVideoItem.toArray().forEach(function(curr,index){
	        	curr.style.width = _this.videoBasicWidth+ 'px';
	        });
	        this.getVideoDiv.style.width = 3*this.getVideoItem[0].offsetWidth;
	        // alert('this.getVideoDiv.offsetWidth:  '+this.getVideoDiv.offsetWidth);
	        this.getVideoDiv.style.marginLeft = (this.getVideoWrap-this.getVideoDiv)/2 + 'px';
	        // alert('this.getVideoDiv.offsetLeft: '+this.getVideoDiv.offsetLeft);
	        // alert('this.videoBasicWidth:  '+this.videoBasicWidth); 
			this.bindEvent();
        }else{
        	document.body.innerHTML='您的浏览器尺寸过小，至少要大于等于320px，网页才可以正常显示';
        	document.body.style.color="wheat";
        }
	},
	bindEvent: function (){
		var _this = this;
		// 返回首页事件
		this.toIndex.addEventListener('click',this.returnIndex);
		// 上传视频事件
		this.getBtnAdd.addEventListener('click',this.addMy.bind(this));
		// 完成编辑视频事件，点击后将新添加的视频保存到后台
		this.getSubmitBtn.addEventListener('click',this.submitCon.bind(this));
		// 编辑视频
		this.getAlterVideoBtn.addEventListener('click',this.alterVideo.bind(this));
		// 返回视频列表
		// this.toVideoColl.addEventListener('click',this.toVideoCollections.bind(this));
		// 为所有video-item添加事件，如果聚焦，则拉近对应scale，即放大播放
		this.getVideoTag.toArray().forEach(function(curr,index){
			// console.log(curr);
			curr.addEventListener("click",function(){
				// 先将当前video的边距值保存下来。
				curr.style.display="absolute";
				if(_this.flag%2!=0){
					curr.style.zIndex=11;
					// 将聚焦的video放在视野中间
					switch(index){
						case 0:{
							curr.style.transform="translateX("+(_this.cwidth-curr.offsetWidth)/2+'px)'+'scale(2,2)';
							_this.flag+=1;
							_this.getVideoTag[1].style.transform="translateX("+(-(_this.getVideoWrap.offsetWidth/3))+"px)";
							break;
						}
						case 1:{
							curr.style.transform='scale(2,2)'+"translateX("+0+'px)';
							_this.flag+=1;
							break;
						}
						case 2:{
							curr.style.transform='scale(2,2)'+"translateX("+(-0.5*(_this.getVideoWrap.offsetWidth-curr.offsetWidth*2))+'px)';
							_this.getVideoTag[1].style.transform="translateX("+((_this.getVideoWrap.offsetWidth/3))+"px)";
							_this.flag+=1;
							break;
						}
					}
				}else{
					//退出播放
					curr.style.zIndex=10;
					switch(index){
						case 0:{
							curr.style.transform="translateX("+0+'px)'+'scale(1,1)';
							_this.getVideoTag[1].style.transform="translateX("+0+"px)";
							_this.flag=1;
							break;
						}
						case 1:{
							curr.style.transform="translateX("+0+'px)'+'scale(1,1)';
							_this.flag=1;
							break;
						}
						case 2:{
							curr.style.transform='scale(1,1)'+"translate3d("+0+'px,'+0+'px,'+0+'px'+')';
							_this.getVideoTag[1].style.transform="translateX("+0+"px)";
							_this.flag=1;
							break;
						}
					}
				}
			});
		});
		// 上传完成事件，点击提交后台并显示在列表里。
		this.getBtnAddCom.addEventListener('click',function(e){
			_this.addVideoCom(e);
		});
		if(this.getSpanText[0]){
			// console.log(this.getSpanText);
			// 如果用户点击了菜单，则动态设置span标签的宽度
			var spanwidth=this.getSpanText[0].offsetWidth;
			// alert("spanwidth:"+spanwidth);
			var liwidth=document.getElementsByClassName("cd-selected")[0].offsetWidth;
			// alert("liwidth:"+liwidth); //105
			this.getSpanText.toArray().forEach(function (curr,inedx){
				curr.style.paddingLeft=(liwidth-spanwidth)/2+'px';
			});
		}
	},
	addVideoCom:function(e){
		var _this = this;
		if(window.FileReader){
			console.log(_this.getBtnAdd.files);
			for(var i=0,f;f=_this.getBtnAdd.files[i];i++){
				var fr = new FileReader();
			}
		}
	},
	returnIndex:function(){
		window.location.href='./index.html';
	},
	submitCon:function(){
		// 获取所有的数据，点击提交
		alert("编辑完成。我要提交视频到后台");
		var _this = this;
		alert(this.getVideoItem.length);
		this.getIfDelShowDiv.toArray().forEach(function(curr,index){
				curr.style.display = "none";
		});
	},
	alterVideo:function(obj,para){
		// console.log("我要编辑视频");
		var _this = this;
		// console.log('getIfDelShowDiv:'+this.getIfDelShowDiv);
		// 让所有的video隐藏的盒子显示，方便用户选择
		this.getIfDelShowDiv.toArray().forEach(function(curr,index){
				curr.style.display = "block";
			curr.addEventListener('click',function(){
				// console.log(curr);
				// 打印出 要删除第几个视频。下标从0开始，
				// 并将参数传给函数，删除相应的video-item
				// console.log('alterVideo:'+index);
				_this.delItem(index);
			});
		});
	},
	delItem:function(para){
		// console.log(para);
		this.getVideoDiv.removeChild(this.getVideoItem[para]);
	},
	loadNext: function(){
		// alert("加载下一屏");
	},
	addMy: function(){
		alert("我要添加视频");
	}
};
(function(){
	page.init();
})();
